<script setup>
import {
  Promotion,
  User,
  EditPen,
  SwitchButton,
  CaretBottom,
  ShoppingCart, House, HomeFilled, Management
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'

import {buyerInfoService} from '@/api/buyer.js'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const buyerInfoStore = useBuyerInfoStore();
const buyerInfo = ref({...buyerInfoStore.info})

//调用函数,获取用户详细信息
const getUserInfo = async()=>{
  //调用接口
  let result = await buyerInfoService();
  //数据存储到pinia中
  buyerInfoStore.setInfo(result.data);
}

getUserInfo();
//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'
import {onMounted, ref} from "vue";
import useBuyerInfoStore from "@/stores/buyerInfo.js";
const handleCommand = (command)=>{
  //判断指令
  if(command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //退出登录
          //1.清空pinia中存储的token以及个人信息
          tokenStore.removeToken()
          buyerInfoStore.removeInfo()

          //2.跳转到登录页面
          router.push('/')
          ElMessage({
            type: 'success',
            message: '退出登录成功',
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '用户取消了退出登录',
          })
        })
  }else{
    //路由
    router.push('/buyer/'+command)
  }
}

import {foodItemsService} from "@/api/food";

//定义商品表单数据
const foodList =ref([
])

onMounted(async () => {
  try {
    const response = await foodItemsService(); // 调用 foodListService 获取数据
    foodList.value = response.data; // 将获取的数据赋值给 food
  } catch (error) {
    console.error('Failed to fetch food list:', error);
  }
});


const home=()=>{
  router.push('/market');
  console.log(foodList)
}

const orders=()=>{
  router.push('/buyer/orders')
}



</script>

<template>
  <!-- element-plus中的容器 -->
  <el-container class="layout-container">
  <!-- 右侧主区域 -->
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header >
      <div class="header-content">
        <el-icon><home-filled></home-filled></el-icon>
        <span class="clickable-home" @click="home">首页</span>
      </div>
      <div class="my-orders">
        <el-icon><Management></Management></el-icon>
        <span class="clickable-orders" @click="orders">我的订单</span>
      </div>

      <div class="username">欢迎用户：<strong class="Buyername">{{buyerInfoStore.info.name}}</strong></div>
      <!-- 下拉菜单 -->
      <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
        <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
              <el-dropdown-item command="address" :icon="Promotion">地址管理</el-dropdown-item>
              <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
    </el-header>
    <!-- 中间区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
    <!-- 底部区域 -->
    <el-footer>临期食品销售平台 ©2024 Created by Zijin</el-footer>
    <!-- 商品展示区域 -->

  </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;

    &_logo {
      width: 70px;
      height: 240px;
      background: url('@/assets/OIP2.png ') no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }



  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 确保左右内容分开 */
    height: 40px;

    .clickable-home{
      cursor: pointer; /* 鼠标悬停时显示为点击指针 */
      margin-left: 8px;

    }
    .clickable-home:hover {
      color:orange; /* 鼠标悬停时改变文字颜色 */
      text-decoration: underline;
    }

    .clickable-orders{
      cursor: pointer; /* 鼠标悬停时显示为点击指针 */
      margin-left: 8px;
    }
    .clickable-orders:hover{
      color:orange; /* 鼠标悬停时改变文字颜色 */
      text-decoration: underline;
    }
    .Buyername{
      cursor: pointer; /* 鼠标悬停时显示为点击指针 */
      margin-left: 8px;
    }
    .Buyername:hover{
      color:orange; /* 鼠标悬停时改变文字颜色 */
      text-decoration: underline;
    }



    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }


  .el-main{
    margin-top: 0;

    .main-search{
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐 */
    .Logo{
      height:63px;
      width: 60px; /* 设置 Logo 宽度 */
      background: url('@/assets/OIP2.png') no-repeat center / 120px auto;

    }
    .logo-content {
      height: 100%; /* 让 Logo 适应 el-form-item 的高度 */
    }
    .el-input{
       margin-left: 2px; /* 与 Logo 之间的间距 */
       width: 700px;
       height: 50px;

     }
  }

    .main-store{
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: flex-start; /* 垂直从顶部开始 */
      height: 100vh;

      .main-store-area{
        width: 1200px; /* 宽度 */
        min-height: 1000px;
        background-color: white;





        .item {
          float: left;
          width: 216px;
          height: 340px;
          margin: 15px 4px 23px;
          text-align: center;
          background: #fff;
          list-style-type: none;
          box-shadow: 0px 0px 10px silver;
          border-radius: 10px;
          transition:border 0.4s;
        }
        .item:hover{
          border: 0.3px solid orange; /* 悬停时的边框样式 */
          padding: 5px;

        }

        .item .img_box {
          cursor: pointer;
          width: 189px;
          height: 200px;
          margin: 40px auto;

        }



        .img_box img {
          width: 192px;
          height: 202px;
          border-radius: 10px;
        }

        .item p {
          font-size: 1px;
          line-height: 16px;
          height: 40px;
          padding: 0 10px;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

      }

    }

  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>


